<!-- px、em、rem的区别 -->

1.px 固定像素单位，不能随其它元素的变化而变化
2.em是相对于父元素的单位，会随着父元素变化而变化

em会查看自身元素font-size大小有没有设置，没有就查看父元素，父元素也没有就会一直向上查看，直到找到根元素

列子：
.parent {
  font-size: 10px;
}
.child {
  width: 5em;
  height: 5em;
  // 1em = 10px

  如果自身设置了font-size: 5px;
  这时1em = 5px
}

3.rem是相对于根元素html，它会随着html元素变化而变化
列子：html {
  font-size: 16px;
  //这时1rem = 16px
}

div {
  font-size: 2rem; 

  //相当于 2 * 16 = 32px;
}

假设我把列子：html {
  font-size: 32px;  或者font-size: 2rem;
  
  //这时其他元素1rem = 32px
}



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
.yeye {
  font-size: 10px;
}
.parent {
  width: 100px;
  height: 100px;
  background: red;
}
.child {
  width: 5em;
  height: 5em;
  background: green;
}
</style>
<body>
  <div class="yeye">
    <div class="parent">
      <div class="child">000000</div>
    </div>
  </div>
</body>
</html>